<template lang="">
	<div class="row chart6">
		<div
			class="flex-1 col col-center chart6-item content"
			:style="{ backgroundColor: colors[index], padding: '15px',height:'80px', top:'-20px' }"
			v-for="(item, index) in list"
			:key="index"
		>
			<div class="item_text">
				{{ item.title }}
			</div>
			<div class="blod">{{ item.value }}</div>
			<div class="item_text">
				<div>
					日环比：{{ item.dailyBasis }}
					<el-icon
						v-if="item.dailyBasisRise == true"
						class="sc-trend-icon sc-trend--P"
						><el-icon-top
					/></el-icon>
					<el-icon v-else class="sc-trend-icon sc-trend--N"
						><el-icon-bottom
					/></el-icon>
				</div>
			</div>
			<div class="item_text">
				周环比：{{ item.weekBasis }}
				<el-icon
					v-if="item.weekBasisRise == true"
					class="sc-trend-icon sc-trend--P"
					><el-icon-top
				/></el-icon>
				<el-icon v-else class="sc-trend-icon sc-trend--N"
					><el-icon-bottom
				/></el-icon>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ref, onBeforeMount } from "vue";
const list = ref([
	{
		title: "支付金额",
		value: "123万",
		dailyBasis: 70.11,
		weekBasis: 70.11,
		dailyBasisRise: true,
		weekBasisRise: false,
	},
	{
		title: "卖家指数",
		value: 1231,
		dailyBasis: 270.11,
		weekBasis: 70.11,
		dailyBasisRise: true,
		weekBasisRise: true,
	},
	{
		title: "商品访客数",
		value: 12377,
		dailyBasis: 70.11,
		weekBasis: 70.11,
		dailyBasisRise: false,
		weekBasisRise: false,
	},
	{
		title: "支付转换率",
		value: "8.7",
		dailyBasis: 70.11,
		weekBasis: 70.11,
		dailyBasisRise: true,
		weekBasisRise: false,
	},
	{
		title: "新客访问",
		value: "4.1万",
		dailyBasis: 125.11,
		weekBasis: 20.11,
		dailyBasisRise: true,
		weekBasisRise: true,
	},
	{
		title: "浏览量",
		value: 12300,
		dailyBasis: 70.11,
		weekBasis: 70.11,
		dailyBasisRise: true,
		weekBasisRise: false,
	},
]);
const colors = ref([
	"#c9dbff",
	"#c9f6ef",
	"#c1ebff",
	"#d6f8fb",
	"#c9dbff",
	"#d8f2dc",
]);
onBeforeMount(() => { });
</script>
<style>
.chart6 {
	width: 100%;

	.div {
		margin: 10px 20px;
	}
}

.row {
	display: flex;
}

.col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.flex-1 {
	flex: 1;
}

.col-center {
	/* justify-content: center; */
	align-items: flex-start;
}

.chart6-item {
	margin: 10px 5px;
	background-color: rgb(242, 242, 242);
	border-radius: 5px;
	border: 0px;
}


.sc-trend {
	display: flex;
	align-items: center;
}

.sc-trend-icon {
	margin-right: 2px;
}

.sc-trend em {
	font-style: normal;
}

.sc-trend-prefix {
	margin-right: 2px;
}

.sc-trend-suffix {
	margin-left: 2px;
}

.sc-trend--P {
	color: #f56c6c;
}

.sc-trend--N {
	color: #67c23a;
}

.sc-trend--Z {
	color: #555;
}
</style>
